<template>
    <div class="skeleton">
        <div class="item_box" v-for="(item,index) in skeleton_list" :key="index">
            <!-- 一行的骨架 -->
            <van-skeleton :row="1"  v-if="item==='line_1_box'" />
            <!-- 商品信息的骨架 -->
            <van-skeleton title avatar :row="2" avatar-shape="square" avatar-size="2rem" v-if="item==='info_box'"></van-skeleton>
            <!-- 两行的骨架 -->
            <div v-if="item==='line_2_box'">
                <van-skeleton class="item_child" :row="2" />
                <van-skeleton class="item_child" :row="2" />
            </div>
            <!-- 三行的骨架 -->
            <div v-if="item==='line_3_box'">
                <van-skeleton class="item_child" :row="2" />
                <van-skeleton class="item_child" :row="2" />
                <van-skeleton class="item_child" :row="2" />
            </div>
            <!-- 底部固定栏 -->
            <van-skeleton class="order-bar" :row="1" v-if="show_bottom"></van-skeleton>
        </div>
    </div>
</template>
<script>
import {Skeleton} from "vant";

import {SKELETON_LIST} from "../../constants/order.js"
export default {
  name: "Skeleton",
  components:{
    [Skeleton.name] : Skeleton
  },
  props:{
    skeletonType:String,//使用骨架屏需传类型参数，类型配置在/constants/order.js中
    show_bottom:{
        type:Boolean,
        default:false
    }
  },
  data() {
    return {
        skeleton_list:SKELETON_LIST,
    };
  },
    mounted(){
        if(this.skeletonType==="order"){
            this.skeleton_list=this.skeleton_list.order
        }else if(this.skeletonType==="order_temp"){
            this.skeleton_list=this.skeleton_list.order_temp
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";
.order-bar {
  @include fixPosition;
  bottom: 0;
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
  @include safeAreaBottom;
  z-index: 11;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.4rem;
  height: 1.12rem;

  ::v-deep .van-skeleton__row{
    border-radius: 0.4rem;
    width: 2.4rem !important;
    height: 0.8rem;
    float: right;
    margin-right: 10%;
  }
}
.skeleton{
  background-color: #fff;
}
.item_box{
    box-sizing: border-box;
    padding:0.32rem 0.3rem;
    .item_child{
        margin-top: 0.2rem;
    }
}

::v-deep .van-skeleton{
  padding: 0;
}
</style>